<toaster-container [toasterconfig]="config"></toaster-container>

<div class="main-container content-page">
    <div class="content-container">
        <div class="content-area">
            <div fxLayout="row" fxLayoutAlign="space-between stretch" class="row-top-background">
                <!--tabs-->
                <div class="{{(!network.activeChain.features['addAcc']||!network.activeChain.features['newAcc'])?'max-width2':'max-width'}}">
                    <mat-tab-group id="header-tabs" (selectedIndexChange)="selectAccount($event)"
                                   [selectedIndex]="selectedTab">
                        <mat-tab #headerTabs *ngFor="let account of aService.accounts; let i = index">
                            <ng-template mat-tab-label>
                                <div *ngIf="account.type !== 'local'" class="account-type-label">{{account.type}}</div>
                                <div style="font-size: 10px;">ACCOUNT {{i + 1}}&nbsp;&nbsp;<fa-icon
                                        *ngIf="aService.accounts.length > 1"
                                        [icon]="['far', 'times-circle']"
                                        class="deleteteacc"
                                        (click)="openRemoveAccModal(i,account)"></fa-icon>
                                </div>
                                <div style="font-size: 17px;">{{account.name}}</div>
                                <div
                                        class="value">{{account.full_balance}} {{network.activeChain['symbol']}}</div>
                            </ng-template>
                        </mat-tab>
                    </mat-tab-group>
                </div>

                <div fxLayout="row">
                    <!--add Acc btn-->
                    <div *ngIf="network.activeChain.features['addAcc']" (click)="openImportModal()">
                        <div class="text-center navbar-btn newaccount">
                            <div style="padding-top: 16px">
                                <fa-icon [icon]="['far', 'user-plus']" size="lg"></fa-icon>
                            </div>
                            <div style="font-size: 15px;">ADD</div>
                            <div style="font-size: 15px;">ACCOUNT</div>
                        </div>
                    </div>

                    <!--new Acc btn-->
                    <div *ngIf="network.activeChain.features['newAcc']" (click)="newAccountModal = true;initNewAcc();">
                        <div class="text-center navbar-btn newaccount">
                            <div style="padding-top: 16px">
                                <fa-icon [icon]="['far', 'user-edit']" size="lg"></fa-icon>
                            </div>
                            <div style="font-size: 15px;">NEW</div>
                            <div style="font-size: 15px;">ACCOUNT</div>
                        </div>
                    </div>

                    <!--Settings btn-->
                    <div class="text-center navbar-btn cog" [routerLink]="['config']">
                        <div>
                            <fa-icon [icon]="['fal', 'cog']" size="2x"></fa-icon>
                        </div>
                    </div>

                    <!--About btn-->
                    <div class="text-center navbar-btn cog" [routerLink]="['about']">
                        <div>
                            <fa-icon [icon]="['far','question-circle']" size="2x"></fa-icon>
                        </div>
                    </div>
                </div>

            </div>
            <div class="content">
                <router-outlet></router-outlet>
            </div>
        </div>
        <nav class="sidenav">
            <section class="sidenav-header">
                <ng-container *ngIf="app.compilerVersion === 'DEFAULT'">
                    <img [src]="'./assets/chain-icons/' + network.activeChain.icon" width="40" height="40"
                         class="chain-icon" style="position: absolute; top: 60px; left: 15px"/>

                    <ng-lottie [options]="lottieConfig"
                               containerClass="display-animation"
                               (animationCreated)="handleAnimation($event)"
                               [width]="'auto'" [height]="'auto'">
                    </ng-lottie>

                    <img src="./assets/simpleos-logo-clara-dashboard.svg" class="display-img" atl="Logo SimplEOS"
                         height="128" style="margin: 12px auto 12px auto;"/>

                </ng-container>

                <ng-container *ngIf="app.compilerVersion === 'LIBERLAND'">
                    <img src="./assets/logos/liberland_logo.PNG" atl="Logo Liberland" height="128"
                         style="margin: 50px auto;"/>
                </ng-container>

                <div style="margin-right: 4px;">
                    connected to
                    <span class="highlight-accent">{{network.activeChain['name']}}</span>
                </div>

            </section>
            <section #sidenavContent class="sidenav-content">
                <a *ngIf="network.activeChain.features['history']" class="nav-link" routerLinkActive="active"
                   [routerLink]="['wallet']">
                    <fa-icon [icon]="['far', 'history']"></fa-icon>&nbsp;&nbsp;HISTORY
                </a>
                <a *ngIf="network.activeChain.features['send']" class="nav-link" routerLinkActive="active"
                   [routerLink]="['send']">
                    <fa-icon [icon]="['far', 'paper-plane']"></fa-icon>&nbsp;&nbsp;SEND
                </a>
                <a *ngIf="network.activeChain.features['resource']" class="nav-link" routerLinkActive="active"
                   [routerLink]="['ram']">
                    <fa-icon [icon]="['far', 'memory']"></fa-icon>&nbsp;&nbsp;RESOURCES
                </a>
                <a *ngIf="network.activeChain.features['vote'] || network.activeChain.features['staking']"
                   class="nav-link" routerLinkActive="active"
                   [routerLink]="['vote']">
                    <ng-container *ngIf="network.activeChain.features['vote']">
                        <fa-icon [icon]="['far', 'edit']"></fa-icon>&nbsp;&nbsp;VOTE
                    </ng-container>
                    <ng-container
                            *ngIf="network.activeChain.features['staking'] && !network.activeChain.features['vote']">
                        <fa-icon [icon]="['far', 'lock']"></fa-icon>&nbsp;&nbsp;STAKE
                    </ng-container>
                </a>
                <a *ngIf="network.activeChain.features['rex']" class="nav-link" routerLinkActive="active"
                   [routerLink]="['rex']">
                    <fa-icon [icon]="['far', 'exchange-alt']"></fa-icon>&nbsp;&nbsp;REX
                </a>
                <a *ngIf="network.activeChain.features['dapps']" class="nav-link" routerLinkActive="active"
                   [routerLink]="['dapp']">
                    <fa-icon [icon]="['far', 'puzzle-piece']"></fa-icon>&nbsp;&nbsp;CONTRACTS (beta)
                </a>
                <a *ngIf="network.activeChain.features['forum']" class="nav-link" routerLinkActive="active"
                   [routerLink]="['referendum']">
                    <fa-icon [icon]="['far', 'box-ballot']"></fa-icon>&nbsp;&nbsp;REFERENDUM
                </a>
            </section>
            <section class="placeholder border-r" *ngIf="app.compilerVersion === 'DEFAULT'">
                <div class="credits">Made with
                    <fa-icon [icon]="['fas', 'heart']"></fa-icon>
                    by <a class="highlight-accent" [routerLink]="['about']">EOS Rio</a>
                </div>
                <div class="version">v{{aService.versionSys}}</div>
            </section>
            <section class="placeholder border-r" *ngIf="app.compilerVersion === 'LIBERLAND'">
                <div class="credits">Powered by <a class="highlight-accent" [routerLink]="['about']">SimplEOS</a></div>
                <div class="version">v{{aService.versionSys}}</div>
            </section>
        </nav>
    </div>
</div>


<clr-wizard #newAccountWizard [(clrWizardOpen)]="newAccountModal" clrWizardSize="lg">
    <clr-wizard-title>New account</clr-wizard-title>
    <clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
    <clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
    <clr-wizard-button [type]="'next'">Next</clr-wizard-button>
    <clr-wizard-button [type]="'finish'">Finish</clr-wizard-button>
    <clr-wizard-page [clrWizardPageNextDisabled]="newAccOptions === ''">
        <ng-template clrPageTitle>Select Method</ng-template>
        <h5 class="mb-3">Create new account</h5>
        <mat-radio-group color="primary" [(ngModel)]="newAccOptions">
            <mat-radio-button value="thispk" style="display: block">
                Associated with this private key
            </mat-radio-button>
            <mat-radio-button value="newpk" style="display: block">
                Associated with new private key
            </mat-radio-button>
        </mat-radio-group>
    </clr-wizard-page>

    <!--Choose acc name: Associated with THIS or NEW pk-->
    <clr-wizard-page *ngIf="newAccOptions === 'thispk' || newAccOptions === 'newpk'"
                     [clrWizardPageNextDisabled]="!accountname_valid"
                     [clrWizardPagePreventDefault]="true"
                     (clrWizardPageOnCommit)="verifyAccountName(true)"
                     (clrWizardPagePrevious)="newAccountWizard.previous()"
                     (clrWizardPageOnCancel)="resetAndClose()">
        <ng-template clrPageTitle>Account Name</ng-template>
        <h5>Choose your account name</h5>
        <h5 class="mt-2">12 characters. Allows all letters and numbers 1-5.</h5>
        <mat-form-field class="mt-3" style="display: block; width: 180px">
            <input matInput #account placeholder="{{aService.activeChain['symbol']}} account name" maxlength="12"
                   (keyup.enter)="verifyAccountName(false)"
                   [(ngModel)]="accountname">
            <mat-hint align="end">{{account.value.length}} / 12</mat-hint>
        </mat-form-field>
        <button class="btn btn-info-outline mt-3" (click)="verifyAccountName(false)">Check availability</button>
        <p class="error">{{accountname_err}}</p>
        <p *ngIf="accountname_valid && account.value.length === 12" class="highlight-primary">
            <strong>{{accountname}}</strong>
            is currently available. Click
            <strong>NEXT</strong>
            to continue.
        </p>
    </clr-wizard-page>

    <clr-wizard-page *ngIf="newAccOptions === 'newpk'"
                     [clrWizardPageNextDisabled]="ownerpub==='' || activepub==='' || (generated?!agreeKeys:false)">
        <ng-template clrPageTitle>Define Keys</ng-template>
        <h5>Selected account: <span class="highlight-primary">{{accountname}}</span></h5>
        <h5>Please enter your desired public keys or click the <span
                class="highlight-primary"> Generate Key Pairs </span>
            button.</h5>
        <mat-form-field class="mt-3" style="width: 100%">
            <input matInput placeholder="Owner Public key" [(ngModel)]="ownerpub" style="font-family: 'SourceCodePro',monospace">
            <a matSuffix class="tooltip tooltip-xs tooltip-bottom-left">
                <fa-icon [icon]="['far', 'clone']" size="lg" class="copy" (click)="cc(ownerpub)"></fa-icon>
                <span class="tooltip-content">Copy</span>
            </a>
            <mat-hint>ctrl c + ctrl v to copy & paste</mat-hint>
        </mat-form-field>
        <mat-form-field class="mt-3" style="width: 100%">
            <input matInput placeholder="Active Public key" [(ngModel)]="activepub" style="font-family: 'SourceCodePro',monospace">
            <a matSuffix class="tooltip tooltip-xs tooltip-bottom-left">
                <fa-icon [icon]="['far', 'clone']" size="lg" class="copy" (click)="cc(activepub)"></fa-icon>
                <span class="tooltip-content">Copy</span>
            </a>
        </mat-form-field>

        <button class="btn btn-info-outline" (click)="generateKeys()">Generate Key Pairs</button>

        <fa-layers *ngIf="generating" class="highlight-primary fa-fw">
            <fa-icon [icon]="['far','spinner']" size="2x" [spin]="true"></fa-icon>
        </fa-layers>

        <ng-container *ngIf="generated">
            <mat-form-field class="mt-3" style="width: 100%">
                <input matInput placeholder="Owner Private key" [(ngModel)]="ownerpk" style="font-family: 'SourceCodePro',monospace">
                <a matSuffix class="tooltip tooltip-xs tooltip-bottom-left">
                    <fa-icon [icon]="['far', 'clone']" size="lg" class="copy" (click)="cc(ownerpk)"></fa-icon>
                    <span class="tooltip-content">Copy</span>
                </a>
            </mat-form-field>
            <mat-form-field class="mt-2" style="width: 100%">
                <input matInput placeholder="Active Private key" [(ngModel)]="activepk" style="font-family: 'SourceCodePro',monospace">
                <a matSuffix class="tooltip tooltip-xs tooltip-bottom-left">
                    <fa-icon [icon]="['far', 'clone']" size="lg" class="copy" (click)="cc(activepk)"></fa-icon>
                    <span class="tooltip-content">Copy</span>
                </a>
            </mat-form-field>
            <mat-checkbox [(ngModel)]="agreeKeys">I have saved all my keys in a safe place</mat-checkbox>
        </ng-container>
    </clr-wizard-page>

    <clr-wizard-page [clrWizardPageNextDisabled]="!delegateForm.valid">
        <ng-template clrPageTitle>Account Resources</ng-template>

        <h5>You will create the account: {{newAccountData.n}}</h5>

        <form [formGroup]="delegateForm" class="pt-0">
            <!--Amount to delegate-->
            <mat-form-field class="mt-3" style="width: 273px">
                <input matInput type="text"
                       placeholder="Amount to delegate (min = 1.0000 {{aService.activeChain['symbol']}})"
                       [textMask]="{mask: numberMask}"
                       formControlName="delegate_amount" (blur)="checkAmount('delegate_amount')">
                <mat-error align="start" *ngIf="amounterror !== ''">
                    {{amounterror}}
                </mat-error>
            </mat-form-field>

            <mat-checkbox formControlName="delegate_transfer">
                Check this if you want to transfer the delegated stake.
                <br>If you chose so this new account will be able to unstake
                <br>and claim those funds. If you leave unchecked you
                <br>will be able to remove the delegated stake in the future.
            </mat-checkbox>

            <!-- Ram to buy-->
            <mat-form-field class="mt-3" style="width: 273px; display: inline-block !important;">
                <input matInput #ramAmount type="text"
                       placeholder="How much ram to buy for this account (min = 4096 bytes)"
                       formControlName="ram_amount" [textMask]="{mask: intMask}" (blur)="checkAmountBytes()">
                <mat-error align="start" *ngIf="amounterror2 !== ''">
                    {{amounterror2}}
                </mat-error>
            </mat-form-field>
            <span style="margin: 0 12px;">=</span>

            <mat-form-field style="width: 100px; display: inline-block !important;">
                <input matInput placeholder="Price in {{aService.activeChain['symbol']}}" disabled readonly
                       value="{{ram.ramPriceEOS * (ramAmount.value/1024) | number: '1.0-4'}} {{aService.activeChain['symbol']}}">
            </mat-form-field>

            <!--Amount to Gift-->
            <mat-form-field class="mt-2" style="width: 273px">
                <input matInput placeholder="{{aService.activeChain['symbol']}} Amount to gift (optional)"
                       [textMask]="{mask: numberMask}"
                       formControlName="gift_amount" (blur)="checkAmount('gift_amount')" type="text">
                <mat-error align="start" *ngIf="amounterror3 !== ''">
                    {{amounterror3}}
                </mat-error>
            </mat-form-field>
        </form>
    </clr-wizard-page>

    <clr-wizard-page [clrWizardPageNextDisabled]="!passform.valid"
                     *ngIf="newAccOptions === 'newpk' && generated && agreeKeys">
        <ng-template clrPageTitle>Set Password</ng-template>
        <h5>Define your password for this account. This will be used to transactions confirmations.</h5>
        <form [formGroup]="passform" class="confirmForm">
            <mat-form-field class="mt-3" style="width: 180px;">
                <input matInput #newpass type="password" placeholder="Password" (blur)="passCompare()"
                       [formControl]="passform['controls'].matchingPassword['controls']['pass1']">
                <fa-icon matSuffix *ngIf="newpass.type === 'password'" [icon]="['far', 'eye']" size="lg" class="copy"
                         (click)="newpass.type = 'text'"></fa-icon>
                <fa-icon matSuffix *ngIf="newpass.type === 'text'" [icon]="['far', 'eye-slash']" size="lg"
                         class="copy" (click)="newpass.type = 'password'"></fa-icon>
                <mat-hint align="start">
                    Min 4 characters
                </mat-hint>
                <mat-hint align="end">{{newpass.value.length}} / 4+</mat-hint>
            </mat-form-field>

            <mat-form-field class="mt-3" style="margin-top: 10px; display: block; width: 180px;">
                <input matInput #newpass2 type="password" placeholder="Confirm password" (blur)="passCompare()"
                       [formControl]="passform['controls'].matchingPassword['controls']['pass2']">
                <fa-icon matSuffix *ngIf="newpass2.type === 'password'" [icon]="['far', 'eye']" size="lg" class="copy"
                         (click)="newpass2.type = 'text'"></fa-icon>
                <fa-icon matSuffix *ngIf="newpass2.type === 'text'" [icon]="['far', 'eye-slash']" size="lg"
                         class="copy" (click)="newpass2.type = 'password'"></fa-icon>
                <mat-error *ngIf="!passmatch">
                    Passwords do not match!
                </mat-error>
            </mat-form-field>
        </form>
    </clr-wizard-page>

    <clr-wizard-page (clrWizardPageOnLoad)="loadLastPage()" [clrWizardPageNextDisabled]="!success">
        <ng-template clrPageTitle>Sign Transaction</ng-template>
        <p-accordion *ngIf="aService.activeChain.name === 'EOS MAINNET'">
            <p-accordionTab header="By submiting this transaction, you agree to the following Ricardian Contract">
                As an authorized party I {{ final_creator }} wish to exercise the authority of {{ final_creator }}
                to create a new account on this system named {{ final_name }} such that the new account's owner public
                key shall be {{ final_owner }} and the active public key shall be {{ final_active }}.
            </p-accordionTab>
        </p-accordion>
        <form [formGroup]="submitTXForm" class="confirmForm" style="margin-top:25px;">
            <mat-form-field>
                <input matInput type="password" (keyup.enter)="executeTX()" placeholder="Password"
                       formControlName="pass">
                <mat-hint class="text-warn bold" align="start" *ngIf="wrongwalletpass !== ''">
                    {{wrongwalletpass}}
                </mat-hint>
                <br clear="all"/>
            </mat-form-field>
            <button type="button" class="btn btn-info-outline" style="margin-top: 1px; margin-left: 10px;"
                    (click)="executeTX()" [disabled]="!submitTXForm.valid || busy">
                Confirm
                <fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy"></fa-icon>
            </button>
            <ng-container *ngIf="success">
                <div class="highlight-primary mt-1">Account created successfully!</div>
                <div><span class="highlight-primary">Transaction id:</span>
                    <a (click)="openTX(confirmationID)" pTooltip="Open on explorer" appendTo="body"
                       style="cursor: pointer;">
                        {{confirmationID}}
                    </a>
                </div>
            </ng-container>
        </form>
    </clr-wizard-page>

</clr-wizard>

<app-import-modal></app-import-modal>

<!--IMPORT ONE MORE EXISTING WALLET-->
<!--<clr-wizard #importAccountWizard [(clrWizardOpen)]="importKeyModal" [clrWizardSize]="'md'">-->
<!--    <clr-wizard-title>Import one more existing account</clr-wizard-title>-->

<!--    <clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>-->
<!--    <clr-wizard-button [type]="'previous'">Back</clr-wizard-button>-->
<!--    <clr-wizard-button [type]="'next'">Next</clr-wizard-button>-->
<!--    <clr-wizard-button [type]="'finish'">Finish</clr-wizard-button>-->

<!--    <clr-wizard-page-->
<!--            [clrWizardPageNextDisabled]="!(pvtform.valid ||-->
<!--            (usingLedger && sLAc.selectedOptions.selected.length > 0))"-->
<!--            (clrWizardPageOnCommit)="importKeys(sLAc.selectedOptions.selected)"-->
<!--            [clrWizardPagePreventDefault]="true"-->
<!--            (clrWizardPageOnCancel)="doCancel()">-->
<!--        <ng-template clrPageTitle>Step 1</ng-template>-->

<!--        <ng-container *ngIf="!usingLedger">-->
<!--            <h5>Insert your existing private key below (ACTIVE key recommended)</h5>-->

<!--            <form [formGroup]="pvtform">-->
<!--                <mat-form-field class="mt-3" style="width: 100%;">-->
<!--                    <input #pkField matInput type="password" formControlName="private_key"-->
<!--                           placeholder="{{network.activeChain['name']}} Active Private key">-->
<!--                    <fa-icon matSuffix *ngIf="pkField.type === 'password'" [icon]="['far', 'eye']" size="lg"-->
<!--                             class="copy"-->
<!--                             (click)="pkField.type = 'text'"></fa-icon>-->
<!--                    <fa-icon matSuffix *ngIf="pkField.type === 'text'" [icon]="['far', 'eye-slash']" size="lg"-->
<!--                             class="copy"-->
<!--                             (click)="pkField.type = 'password'"></fa-icon>-->
<!--                    <mat-hint align="start">-->
<!--                        ctrl c + ctrl v to copy & paste-->
<!--                    </mat-hint>-->
<!--                    <mat-error *ngIf="!pvtform.valid">-->
<!--                        {{errormsg}}-->
<!--                    </mat-error>-->
<!--                    <mat-error>-->
<!--                        {{apierror}}-->
<!--                    </mat-error>-->
<!--                </mat-form-field>-->
<!--            </form>-->

<!--            <br>-->

<!--            &lt;!&ndash;		standart accounts&ndash;&gt;-->
<!--            <div *ngFor="let importedAccount of importedAccounts">-->
<!--            <span class="label label-blue" style="font-size: medium">-->
<!--                {{importedAccount['account_name']}}@{{importedAccount['permission']}}-->
<!--            </span>-->
<!--            </div>-->
<!--        </ng-container>-->

<!--        <ng-container *ngIf="pvtform.get('private_key').pristine">-->
<!--            <p *ngIf="!usingLedger">OR</p>-->

<!--            <button class="btn btn-primary" (click)="loadLedgerAccounts()">USE HARDWARE WALLET</button>-->

<!--            <p *ngIf="ledgerError !== ''" class="error">{{ledgerError}}</p>-->

<!--            <fa-layers *ngIf="ledgerService.reading" class="highlight-primary fa-fw">-->
<!--                <fa-icon [icon]="['far','spinner']" size="2x" [spin]="true"></fa-icon>-->
<!--            </fa-layers>-->

<!--            <p *ngIf="ledgerService.reading">Reading slot: {{ledgerService.currentSlot}}</p>-->

<!--            <div *ngIf="importedAccounts.length > 0" style="margin-top: 10px">-->
<!--                Account<span *ngIf="importedAccounts.length > 1">s</span>-->
<!--            </div>-->

<!--            &lt;!&ndash;		ledger accounts&ndash;&gt;-->
<!--            <div *ngIf="ledgerService.ledgerAccounts.length > 0"-->
<!--                 style="margin-top: 20px;">-->
<!--                Select the accounts to import:-->
<!--            </div>-->

<!--        </ng-container>-->

<!--        <mat-selection-list [ngStyle]="{'display': usingLedger ? 'inherit':'none'}"-->
<!--                            #sLAc-->
<!--                            class="ledger-select">-->
<!--            <ng-container *ngFor="let elem of ledgerService.ledgerAccounts">-->
<!--                <mat-list-option *ngFor="let acct of elem.accounts"-->
<!--                                 color="primary"-->
<!--                                 (click)="tick()"-->
<!--                                 [value]="acct">-->
<!--                    {{acct.actor}}@{{acct.permission}}-->
<!--                </mat-list-option>-->
<!--            </ng-container>-->
<!--        </mat-selection-list>-->

<!--        <ng-container *ngIf="pvtform.get('private_key').pristine">-->
<!--            <div *ngIf="sLAc.selectedOptions.selected.length > 0" style="margin-top:10px;">-->
<!--                {{sLAc.selectedOptions.selected.length}} accounts selected-->
<!--            </div>-->
<!--        </ng-container>-->

<!--    </clr-wizard-page>-->

<!--    <clr-wizard-page [clrWizardPageNextDisabled]="!(passform2.valid ||-->
<!--            (usingLedger && accountsToImport.length > 0))"-->
<!--                     (clrWizardPageOnCommit)="importAccounts()">-->
<!--        <ng-template clrPageTitle>Step 2</ng-template>-->

<!--        <ng-container *ngIf="!usingLedger">-->
<!--            <form [formGroup]="passform2">-->
<!--                <h5>Define your password. This will be used to <strong>transactions confirmations.</strong></h5>-->
<!--                <mat-form-field class="mt-2">-->
<!--                    <input matInput #importedpass type="password" placeholder="Password" (blur)="importedPassCompare()"-->
<!--                           [formControl]="passform2['controls'].matchingPassword['controls']['pass1']">-->
<!--                    <fa-icon matSuffix *ngIf="importedpass.type === 'password'" [icon]="['far', 'eye']" size="lg"-->
<!--                             class="copy"-->
<!--                             (click)="importedpass.type = 'text'"></fa-icon>-->
<!--                    <fa-icon matSuffix *ngIf="importedpass.type === 'text'" [icon]="['far', 'eye-slash']" size="lg"-->
<!--                             class="copy"-->
<!--                             (click)="importedpass.type = 'password'"></fa-icon>-->
<!--                    <mat-hint align="start">-->
<!--                        Min 10 characters-->
<!--                    </mat-hint>-->
<!--                    <mat-hint align="end">{{importedpass.value.length}} / 10+</mat-hint>-->
<!--                </mat-form-field>-->
<!--                <mat-form-field class="mt-3">-->
<!--                    <input matInput #importedpass2 type="password" placeholder="Confirm password"-->
<!--                           (blur)="importedPassCompare()"-->
<!--                           [formControl]="passform2['controls'].matchingPassword['controls']['pass2']">-->

<!--                    <fa-icon matSuffix *ngIf="importedpass2.type === 'password'" [icon]="['far', 'eye']" size="lg"-->
<!--                             class="copy"-->
<!--                             (click)="importedpass2.type = 'text'"></fa-icon>-->
<!--                    <fa-icon matSuffix *ngIf="importedpass2.type === 'text'" [icon]="['far', 'eye-slash']" size="lg"-->
<!--                             class="copy"-->
<!--                             (click)="importedpass2.type = 'password'"></fa-icon>-->

<!--                    <mat-error *ngIf="!passmatch2">-->
<!--                        Passwords do not match!-->
<!--                    </mat-error>-->
<!--                </mat-form-field>-->
<!--            </form>-->
<!--        </ng-container>-->

<!--        <ng-container *ngIf="usingLedger">-->
<!--            Confirm import for:-->
<!--            <div *ngFor="let acc of accountsToImport">-->
<!--            <span class="label label-blue">-->
<!--                {{acc['account_name']}}-->
<!--            </span>-->
<!--            </div>-->
<!--        </ng-container>-->

<!--    </clr-wizard-page>-->
<!--</clr-wizard>-->
<!--IMPORT ONE MORE EXISTING WALLET END-->

<!--REMOVE ACCOUNT-->
<clr-modal [(clrModalOpen)]="deleteAccModal" [clrModalSize]="'md'">
    <h3 class="modal-title text-white">
        <fa-icon [icon]="['far', 'user-minus']"></fa-icon>&nbsp;&nbsp;<span class="highlight-primary">Remove</span>
        account?
    </h3>
    <div class="modal-body" *ngIf="selectedAccRem">
        <p style="margin-bottom: 20px; color: #b1b1b1;">Are you sure you want do remove the account <span
                class="highlight-primary">{{selectedAccRem.name}}</span>
            from <span *ngIf="app.compilerVersion === 'DEFAULT'">SimplEOS</span><span
                    *ngIf="app.compilerVersion === 'LIBERLAND'">Liberland wallet</span>?</p>
        <p style="margin-bottom: 20px;">*This will NOT delete your account from the blockchain, it will just remove it
            from
            <span *ngIf="app.compilerVersion === 'DEFAULT'">SimplEOS</span><span
                    *ngIf="app.compilerVersion === 'LIBERLAND'">the wallet</span>. Should you want to import it again,
            just
            click on the "ADD ACCOUNT" button.</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger-outline" (click)="deleteAccModal = false">Cancel</button>
        <button type="button" class="btn btn-info-outline" (click)="doRemoveAcc()">
            Yes, remove
        </button>
    </div>
</clr-modal>
<!--REMOVE ACCOUNT-->
